<template>
  <div class="banner_content">
    <div class="banner_list">
      <p class="title">BANNER</p>
      <div class="banner" v-loading="loading">
        <div class="swiper">

          <div :class="{'carousel-button-prev':true, 'disabled':curIndex == 0}" @click="slidePrev" >
            <button type="button" class="el-carousel__arrow el-carousel__arrow--left"  >
              <i class="el-icon-arrow-left"></i>
            </button>
          </div> 
          <swiper :options="swiperOption" ref="mySwiper">
            <draggable v-model="bannerList"   animation="1000"  @change="draggableEnd" class="swiper-slide">
              <div v-for="(slide, index) in bannerList" :key="index" class="bannerItem  swiper-no-swiping" >
                <div @click.stop.prevent="setCurBannerItem(slide ,index)" :class="{'active':slide.id == curItem.id}">
                  <el-image :src="utils.setCdnUrl() + slide.image" > </el-image>
                  <i class="iconfont icon-video" v-show="slide.video_url"></i>
                </div>
              </div>
            </draggable>
          </swiper>

          <div :class="{'carousel-button-next':true,'disabled':curIndex == bannerList.length-1 }" @click="slideNext">
            <button type="button" class="el-carousel__arrow el-carousel__arrow--right">
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
 
        </div>
        <div class="image" @click="closeEditDialog()" v-if="curItem.id">
          <el-image v-show="curItem.image" :src="utils.setCdnUrl() + curItem.image" class="pop_image" v-if="isPicture(curItem.image)"></el-image>
          <span v-show="curItem.video_url" v-html="videoUrl(curItem)"></span>  
          <div class="title_con">
            <p class="title" :style="'top:' + curItem.first_title_font_position_up + '%;left:' + curItem.first_title_font_position_left + '%;' +
            'font-size:' + curItem.first_title_font_size+'px; color:' + curItem.first_title_font_color +';padding-right:'+ curItem.first_title_font_position_left+ '%'">{{curItem.first_title}}</p>
            <p class="title"  :style="'top:' + curItem.second_title_font_position_up + '%;left:' + curItem.second_title_font_position_left + '%;' +
            'font-size:' + curItem.second_title_font_size+'px; color:' + curItem.second_title_font_color  +';padding-right:'+ curItem.second_title_font_position_left+ '%' ">{{curItem.second_title}}</p>
          </div>
     
          <p class="num"> {{num}}</p>

          <el-button @click.stop="closeDelDialog" v-if="$_has('/banner/del')">删除</el-button>
        </div>
        <div v-else class="image noData"></div>
      </div>
    </div>
    <div class="upload_banner" @click="closeAddDialog" >
      <i class="iconfont icon-add_2_normal"></i>
    </div>
    <div class="set">
      <p class="title">设置</p>
      <div class="set_content">
        <p class="first_title">一级标题</p>
        <p class="second_title top10">字号</p>
        <el-input-number  controls-position="right" :min="14" :max="48" v-model="curItem.first_title_font_size"></el-input-number>
        <p class="second_title">颜色</p>
        <div class="color_picker">
          <el-input>
            <template slot="suffix" >
              <SvgIcon iconClass="icon-color" className="picker_color" ></SvgIcon>
            </template>
          </el-input>
          <el-color-picker size="small"  v-model="curItem.first_title_font_color"></el-color-picker>
          <p class="color_show" :style="'background-color:' + curItem.first_title_font_color"></p>
        </div>
        <p class="second_title">位置</p>
        <div class="pos_picker">
          <div>
            <p>上下</p>
            <el-input-number  controls-position="right" v-model="curItem.first_title_font_position_up"></el-input-number>
          </div>
          <div>
            <p>左右</p>
            <el-input-number  controls-position="right" v-model="curItem.first_title_font_position_left"></el-input-number>
          </div>
        </div>
        <p class="first_title">二级标题</p>
        <p class="second_title top10">字号</p>
        <el-input-number  controls-position="right" :min="14" :max="48" v-model="curItem.second_title_font_size"></el-input-number>
        <p class="second_title">颜色</p>
        <div class="color_picker">
          <el-input >
            <template slot="suffix" >
              <SvgIcon iconClass="icon-color" className="picker_color"></SvgIcon>
            </template>
          </el-input>
          <el-color-picker size="small" v-model="curItem.second_title_font_color"></el-color-picker>
          <p class="color_show" :style="'background-color:' + curItem.second_title_font_color"></p>
        </div>
        <p class="second_title">位置</p>
        <div class="pos_picker">
          <div>
            <p>上下</p>
            <el-input-number  controls-position="right" v-model="curItem.second_title_font_position_up"></el-input-number>
          </div>
          <div>
            <p>左右</p>
            <el-input-number  controls-position="right" v-model="curItem.second_title_font_position_left"></el-input-number>
          </div>
        </div>
        <p class="first_title">轮播设置</p>
        <p class="second_title top10">轮播时间</p>
        <el-input-number  controls-position="right" v-model="curItem.carousel_time" :min="5" :max="30" @change="changeCarouselTime"></el-input-number>

      </div>
      <div class="btn_con">
        <el-button type="search" @click="SetBannerTitle" >保存</el-button>
      </div> 
    </div>
    <Add v-show="addShow" :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Edit v-show="editShow" :id="curItem.banner_id" :show="editShow" @closeDialog="closeEditDialog"></Edit>
    <Del v-show="delShow"  :id="curItem.banner_id" :show="delShow" @closeDialog="closeDelDialog"></Del>
  </div>
</template>

<script>
import { Swiper } from 'vue-awesome-swiper'

import SvgIcon from '@/components/SvgIcon'
import { Add, Del, Edit } from './components'
import { bannerList, bannerSetTitle, sort } from '@/api/index/banner'
import { hasPermission, checkFile } from '@/utils/index.js'
import draggable from 'vuedraggable'
export default {
  name: 'banner',
  data () {
    return {
      addShow: false,
      editShow: false,
      delShow: false,
      loading: false,
      num:'0/0',
      curItem: {
        id:'',
      },
      curIndex: 0,
      bannerList: [],
      swiperOption: {
        loop: false,
        direction: 'vertical',
        spaceBetween: 16,
        height: 54.6
        // slidesPerView: 7,
      },
    }
  },
 computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  components: { SvgIcon, Add, Del, Edit, Swiper, draggable },
  created () {
    // vm = this
    this.getBannerList()
  },
  methods: {
    videoUrl: function(item){ //解决视频地址更新 视频不更新的问题
      let html = ` <video class="video-player" id="upvideo" muted x5-video-player-type="h5" x-webkit-airplay="true"  webkit-playsinline="true"
                  playsinline="" poster="`+this.utils.setCdnUrl()  +item.httpImage+`"  preload="none" autoplay="" loop="" >
                  <source src="`+this.utils.setCdnUrl()+item.video_url+`" />
                 </video>`
      return html
    },
    isPicture(url){
      if(url){
        return  checkFile(url, 'image', 'jpeg|jpg')
      } else {
        return false
      }
      
    },

    draggableEnd () { //拖拽结束
      let list = this.bannerList
      let index = ''
      for(let i = 0; i< list.length; i++){
        if(list[i].id == this.curItem.id){
          index = i
          break;
        }
      }
      this.curIndex = index
      this.num =  index+1 +'/' + this.bannerList.length
      this.sortRequest()
    },
    sortRequest() { // 排序接口
      let list = JSON.parse(JSON.stringify(this.bannerList))
      let banner_ids = []
      for(let i = 0; i < list.length; i++){
        banner_ids.push(list[i].banner_id)
      }
      let params = {
        banner_ids : JSON.stringify( banner_ids)
      }
      sort(params).then(()=>{ })
    },
    slidePrev(){
      let index = 0
      if(this.curIndex > 0){
        index = this.curIndex -=1
      }
      this.curIndex = index
      let item = this.bannerList[index]
      this.setCurBannerItem(item,index)
      this.swiperScrollBy()
      this.swiper.slidePrev(1000, true)

    },
    slideNext(){
      let index  = this.bannerList.length - 1
      if (this.curIndex <  index) {
        index = this.curIndex +=1
      }
      this.curIndex = index
      let item = this.bannerList[index]
      this.setCurBannerItem(item,index)
      this.swiperScrollBy()
      this.swiper.slideNext(1000, true)
    },
    swiperScrollBy (){ // swiper 保证当前选中显示在窗口内
      let sw = document.getElementsByClassName('swiper-container')
      let active = sw[0].getElementsByClassName('active')[0].offsetTop - 86
      sw[0].scroll({
        top: active,
        left: 0,
        behavior: 'smooth'
      });
    },
    SetBannerTitle(){
      if( hasPermission('/banner/set_title')){
        let list = []
        list.push(this.curItem)
        let params = {
          data: JSON.stringify(list),
          banner_id: this.curItem.banner_id
        }
        bannerSetTitle(params).then(res=>{
          if(res.state == 1){
            this.$message.success('保存成功')
            this.getBannerList()
          }
        }) 
      } else {
        this.$message.error('无编辑banner 标题权限，请联系管理员修改权限')
      }
     
 
    },
    setCurBannerItem(item,index){
      this.curItem = item
      this.curIndex = index
      this.num =  index+1 +'/' + this.bannerList.length
    },
    getBannerList(){
      this.loading = true
      bannerList().then(res =>{
        if(res.state ==1){
          let list = res.data.rows
          this.bannerList = list
          if(list.length>0){
            this.curItem= list[0]
            this.curIndex = 0
            this.num =  '1/' + list.length
          }else{
             this.curItem = ''
          }
        }
        this.loading = false

      })
    },
    closeAddDialog(){
      if (hasPermission('/banner/add') ){
        this.addShow = !this.addShow
        if(!this.addShow){
          this.getBannerList()
        }
      }else {
        this.$message.error('无新增banner权限，请联系管理员修改权限')
      }
     
    },
    closeDelDialog(){
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getBannerList()
      }
    },
    closeEditDialog () {
      if (hasPermission('/banner/edit')) {
        this.editShow = !this.editShow
        if(!this.editShow){
          this.getBannerList()
        }
      }else {
        this.$message.error('无编辑banner权限，请联系管理员修改权限')
      }
     
    },
    changeCarouselTime(value){
      let list = this.bannerList 
      for(let i = 0; i < list.length; i++ ){
        list[i].carousel_time = value
      }
    }  
  }

}
</script>

<style lang="scss">
@import '@/styles/home/banner.scss';

</style>